<template>
  <div class="tabs">
    <div class="top-tabs">
      <!-- 最上层导航栏 -->
      <div class="tabs-select">
        <!-- 导航栏左边 -->
        <div class="nav-left">
          <navMenu :login="login" />
          <div class="btngroup">
            <el-button class="btn" icon="el-icon-arrow-left" @click="back" circle></el-button>
            <el-button class="btn" icon="el-icon-arrow-right" @click="forward" circle></el-button>
          </div>
        </div>

        <div class="nav-right">
          <!-- 登录用户 -->

          <div class="user" v-if="login">
            <el-dropdown>
              <div class="user">
                <div class="user-pic">
                  <img class="user-icon" :src="userInfo.profile.avatarUrl + '?param=100y100'" alt />
                </div>
                <span class="user-name">{{ userInfo.profile.nickname }}</span>
                <el-dropdown-menu slot="dropdown">
                  <router-link
                    class="login-a"
                    :to="{ name:'userAccount',query:{ id:userInfo.account.id } }"
                  >
                    <el-dropdown-item>个人中心</el-dropdown-item>
                  </router-link>

                  <el-dropdown-item @click.native="clearCookie" divided>退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </div>
            </el-dropdown>
          </div>

          <!-- 未登录用户 -->
          <router-link to="/login" class="login-a">
            <div class="user" v-if="!login">
              <div class="user-pic">
                <img
                  class="user-icon"
                  src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"
                  alt
                />
              </div>
              <span class="user-name">未登录</span>
            </div>
          </router-link>

          <!-- 导航栏右边搜索 -->
          <search class="search"></search>
        </div>
      </div>
    </div>
    <transition name="el-fade-in">
      <keep-alive :include="['findmusic']">
        <router-view></router-view>
      </keep-alive>
    </transition>
    <div class="bottom-tabs">
      <music-player />
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import search from "@/views/tabs/components/search";
import navMenu from "@/views/tabs/components/nav-menu";
import { loginstatusAPI } from "@/api/login.js";
import MusicPlayer from "@/components/music-player/music-player";
import { mapState } from "vuex";
import findIP from "@/utils/getIp";

export default {
  name: "tabs",
  //import引入的组件需要注入到对象中才能使用
  components: { search, navMenu, MusicPlayer },
  props: {},
  data () {
    //这里存放数据
    return {
      activeName: "second",
      login: false,
      userInfo: {},
    };
  },
  //计算属性 类似于data概念
  computed: {
    ...mapState(["usercookie"]),
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    back () {
      this.$router.go(-1);
    },
    forward () {
      this.$router.go(1);
    },
    getIp () {
      findIP((ip) => {
        if (ip != "0.0.0.0") {
          // console.log("got ip: ", ip);
          this.$store.state.realIP = ip;
        }
      });
    },
    // handleClick(tab, event) {
    //   console.log(tab, event);
    // },
    async getisLogin () {
      let strcookie = this.$store.state.usercookie;
      try {
        document.cookie = strcookie;
      } catch (error) {
        console.log(error);
      }
      const { data } = await loginstatusAPI();
      // console.log("查询登录状态", data.data);
      // const nodata = await loginstatusbynothingAPI();
      // console.log("查询登录状态不传cookie", nodata.data.data);
      // 登录成功存取用户数据
      if (data.data.profile != null) {
        this.login = true;
        this.userInfo = data.data;
        this.$store.commit("setUserInfo", data.data);
        this.$store.state.isLogin = true;
      } else if (data.data.profile == null) {
        this.login = false;
        this.$store.state.isLogin = false;
        this.$notify({
          title: "关于内容不能显示",
          message:
            "因网易云接口限制，没有登录会被作为爬虫处理拉黑，若无法正常使用功能，请用二维码登录",
          type: "warning",
          position: "top-left",
          duration: 20000,
        });
      }
    },
    clearCookie () {
      console.log("清除用户数据");
      this.$store.commit("setUser", "");
      this.login = false;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created () {
    this.getisLogin();
    this.getIp();

    // console.log(this.$store.state, "stat e");
    console.log(this.$store, "vuex");
    // this.$store.commit('getdatabyA', "消息1")
    this.$store.commit({
      type: 'getdatabyA',
      text: "消息1"
    })
    this.$store.dispatch('getdatabyB', "消息2")
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted () { },
  beforeCreate () { }, //生命周期 - 创建之前
  beforeMount () { }, //生命周期 - 挂载之前
  beforeUpdate () { }, //生命周期 - 更新之前
  updated () { }, //生命周期 - 更新之后
  beforeDestroy () { }, //生命周期 - 销毁之前
  destroyed () { }, //生命周期 - 销毁完成
  activated () { }, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped lang='less'>
.tabs {
  height: 100%;
  .top-tabs {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    background-color: #242424;
    height: 70px;
    min-width: 1200px;

    .tabs-select {
      height: 70px;
      display: flex;
      width: 1200px;
      margin: 0 auto;
      justify-content: space-between;
      .nav-left {
        display: flex;
        .btngroup {
          margin-top: 20px;
          margin-left: 70px;
        }
        .btn {
          width: 40px;
          height: 40px;
          background-color: #d8d8d8;
          i {
            font-size: 30px;
          }
        }
      }
      .nav-right {
        display: flex;
        .search {
          margin-top: 13px;
        }
        .login-a {
          text-decoration: none;
          color: rgb(252, 252, 252);
        }
        .login-a:active {
          text-decoration: none;
        }
        .user {
          display: flex;
          justify-content: space-between;
          margin-right: 50px;
          .user-pic {
            width: 50px;
            height: 50px;
            border-radius: 50px;
            margin-top: 8px;
            overflow: hidden;
            .user-icon {
              width: 50px;
              height: 50px;
            }
          }
          .user-name {
            margin-left: 5px;
            margin-top: 22px;
            color: rgb(252, 248, 248);
          }
          .user-name:hover {
            margin-left: 5px;
            margin-top: 22px;
            color: rgb(255, 255, 255);
          }
        }
      }
    }
  }
}
/deep/ .login-a {
  text-decoration: none;
  color: rgb(252, 252, 252);
}
</style>